<template>
  <table class="my-table3">
    <div>
      <input type="checkbox" :disabled="isActiveSelectDisabled" v-model="isActiveSelect" @change="selectActiveChange">当前页
      <input type="checkbox" v-model="isAllSelect" @change="selectAllChange">所有页
      <span>已选条数：{{checkedSum}}</span>
      <button @click="toPage(1)">1</button>
      <button @click="toPage(2)">2</button>
    </div>
    <slot></slot>
  </table>
</template>

<script>
import emitter from './emitter'
export default {
  mixins: [emitter],
  componentName: 'elTable',
  data () {
    return {
      isActiveSelectDisabled: false,
      isActiveSelect: false,
      isAllSelect: false
    }
  },
  props: {
    selectList: Array,
    total: Number,
  },
  provide () {
    return {
      table: this
    }
  },
  created () {
    this.$on('init', () => { this.init() })
    this.$on('initChangeChecked', (o) => { this.initChangeChecked(o) })
    this.$on('handChangeChecked', (o) => { this.handChangeChecked(o) })
  },
  methods: {
    init () { // 翻页后执行
      if (this.isAllSelect) {
        this.isActiveSelect = true
      } else {
        this.isActiveSelect = false
      }
    },
    isContained (a, b) { // a是否包含b
      if (!(a instanceof Array) || !(b instanceof Array)) return false
      if (a.length < b.length) return false
      for (var i = 0, len = b.length; i < len; i++) {
        if (!a.includes(b[i])) return false
      }
      return true
    },
    initChangeChecked (o) {
      this.isActiveSelect = this.isContained(this.selectList, this.getIds())
    },
    handChangeChecked (o) {
      let arr = o.checked ? this.selectList.filter(u => u !== o.id).concat([o.id]) : this.selectList.filter(u => u !== o.id)
      if (arr.length === this.total) {
        this.isAllSelect = true
        this.selectAllChange()
      } else {
        this.isActiveSelect = this.isContained(arr, this.getIds())
        this.$emit('select', arr)
      }
    },
    getIds () {
      let ids = Array.from(document.querySelectorAll('.table-select-box')).map(u => {
        return Number(u.getAttribute('checkedid'))
      })
      return ids
    },
    selectActiveChange () {
      this.broadcast('elTableSelect', 'selectActive', this.isActiveSelect)
      const selectList = this.isActiveSelect ? this.selectList.filter(u => !this.getIds().includes(u)).concat(this.getIds()) : this.selectList.filter(u => !this.getIds().includes(u))
      if (selectList.length === this.total) {
        this.isAllSelect = true
        this.selectAllChange()
      } else {
        this.$emit('select', selectList)
      }
    },
    toPage (page) {
      this.$emit('pageChange', page)
    },
    selectAllChange () {
      this.isActiveSelect = this.isAllSelect
      this.isActiveSelectDisabled = this.isAllSelect
      this.broadcast('elTableSelect', 'selectAll', this.isAllSelect)
      this.$emit('select', this.isAllSelect ? null : [])
    }
  },
  watch: {
    total (n, o) {
      if (this.selectList.length === n) {
        this.isAllSelect = true
        this.selectAllChange()
      }
    }
  },
  computed: {
    checkedSum () {
      if (this.isAllSelect) {
        return this.total
      } else {
        return this.selectList.length
      }
    }
  }
}
</script>

<style lang="scss">
.my-table3{
  color: blue;
  th{
    color: red; 
  }
}
</style>